<template>
    <div class="back_contain_n screen_full" ref="screenFull">	
        <div class="_top">
            <span @click="screenFullFun" class="iconfont icon-quanping1 icon_full"></span>
            <span @click="handleClick" class="agv">AGV</span>
            <div class="_left_logo">
				<img :src="sysInfo.headImg"/>
            </div>
            <div class="_right_box">
                <p class="_titlens">挤塑直切过程品控<span>伸直（7-12）</span></p>
                <div style="display: flex;">
                    <div class="input_flex">
                        <span class="search_left">生产日期：</span>
                        <span>2023-11-01</span>
                    </div>
                    <div class="input_flex">
                        <span class="search_left">班次：</span>
                        <span>白班</span>
                    </div>
                    <div class="input_flex">
                        <span class="search_left">班长：</span>
                        <span>李长林</span>
                    </div>
                </div>
            </div>
        </div>
        <dv-scroll-board :config="tableData" class="inline_dv_table" @click="dvTable" />
        
        <div class="zll-dialog">
            <popout title="挤塑直切过程品控" :visible.sync="addDialog" v-if="addDialog" class="orderSize">
                <add ref="add" slot="content" :editData="editData" :type="type" :isScreenfull="isScreenfull"></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton"  @click="()=>{this.$refs.add.submitForm('addForm')}">提交</p>
                </template>
            </popout>
        </div> 
        <div class="zll-dialog">
            <popout title="操作" :visible.sync="agvDialog" v-if="agvDialog" class="agv">
                <AgvComponent slot="content" v-if="agvDialog"></AgvComponent>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="agvDialog = false">关 闭</p>
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
import Add from './add'
import AgvComponent from './agvComponent'
import screenfull from 'screenfull'
export default {
    data(){
        return {
            tableLoading:true, //table刷新
            type: '',
            editData: {},
			refreshInterval: null, // 用于存储定时器的引用
            query: {
                searchInput1: '',
                searchInput2: '',
                searchInput3: '',
                searchInput4: '',
            },	
            dataList: [				
                {data1:'Z07',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z08',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z09',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z10',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z11',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z12',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z13',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
                {data1:'Z14',data2:'170标准尔白',data3:'2.2*129*12,1支',data4:'5.10',data5:'75',data6:'2.30',data7:'无',data8:'无',data9:'优',data10:'20.21',data11:'/',data12:'12:11',data13:'赵影'},
            ],	
            tableData: {
                carousel: 'page',
                waitTime: 5000,
                headerBGC: '#F2F2F2',
                oddRowBGC: '#fff',
                evenRowBGC: '#F2F2F2',
				align: ['center','center','center','center','center','center','center','center','center','center','center','center','center','center',],
                headerHeight: '50',
                rowNum: 8,												
                header: ['设备号', '产品名称', '规格', '直径±0.1mm', '长度±2mm', '产品重量（g）', '气味','杂质','外观','壁厚≤0.02mm','尖口≥45°','检测时间','质检员','操作'],
				columnWidth: [120,170,250,150,150,150,150,150,150,150,150,230,160,150,150,],
                data: []
            },								       
            addDialog: false,
            sysInfo: {
                headImg:  require('../../../../assets/back_manage_img/logo.png'),
            },
			isScreenfull: false,
            agvDialog:false
        }
    },
    methods: {
        dvTable(config) {
            if( config.columnIndex == 13) { //判断是否点击操作列
                this.edit(config.row,'edit')
            }
        },
        screenFullFun() {
            if (!screenfull.isEnabled) {
                // 如果不支持进入全屏，发出不支持提示
                this.$message({
                    message: "您的浏览器版本过低不支持全屏显示！",
                    type: "warning",
                });
                return false;
            }	
			this.isScreenfull = !this.isScreenfull
            screenfull.toggle(this.$refs.screenFull);
        },
        edit(val,type) {
            this.type = type
            this.addDialog = true
            this.editData = val
        },
        getList() {
            let self = this;
			let allDatas = [];
            for(let data of self.dataList){
                let tables = [];
				tables[0] = data.data1;
				tables[1] = data.data2;
				tables[2] = data.data3;
				tables[3] = data.data4;
				tables[4] = data.data5;
				tables[5] = data.data6;
				tables[6] = data.data7;
				tables[7] = data.data8;
				tables[8] = data.data9;
				tables[9] = data.data10;
				tables[11] = '<span title="' + (data.data12) + '">' + (data.data12) + '</span>';
				tables[12] = data.data13;
				tables[13] = '<span class="_edit">编辑</span>'

				allDatas.push(tables);
            }
            self.tableData.data = allDatas;
            self.tableData = Object.assign({},self.tableData);
        },
        getSysHeadImg() {
            let self = this;
            self.$http({
                url: "/jinl/file/api/queryFileList?",
                method: "post",
                params:{type:'3',}
            }).then(resp => {
                if (resp.success) {
                    if(resp.result.length > 0){
                        self.sysInfo.headImg = resp.result[0].fileUrl;
                    }

                }
            });
        },
		refreshPageData() {
			// 这个函数用于刷新页面数据
			// 你可以根据实际情况重新加载数据或者执行其他刷新逻辑
			this.getLineOtherList();
			this.getSysHeadImg();
		},
		startAutoRefresh() {
			// 设置定时器，每隔一小时刷新页面数据
			this.refreshInterval = setInterval(() => {
				this.refreshPageData();
			}, 2400000); // 40 分(分钟)=2400000 毫秒
		},
		stopAutoRefresh() {
			// 清除定时器
			if (this.refreshInterval) {
				clearInterval(this.refreshInterval);
				this.refreshInterval = null;
			}
		},
    },
    mounted(){
        let self = this;
        self.getList()
		self.getSysHeadImg()
        self.$eventBus.$on("updateWorkList",function () {
            self.addDialog = false;
            self.getList()
        })
		// 组件挂载后立即启动自动刷新
		this.startAutoRefresh();

		// 组件销毁时停止自动刷新
		this.$once('hook:beforeDestroy', () => {
			this.stopAutoRefresh();
		});
    },
    components: {
        Add,
        AgvComponent
    },
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
@font-face {
    font-family: 'fonta';
    src: url(../../../../style/fontFamily.ttf);
}
.inline_dv_table {
    height: calc(100vh - 170px);
}
._top {
    padding: 20px;
    background: #020935;
    display: flex;
    color: #00d1d0;
    position: relative;
    height: 120px;
    .icon_full {
        position: absolute;
        top: 20px;right: 20px;
        font-size: 28px;color: #fff;
    }
    .agv{
        position: absolute;
        cursor: pointer;
        top: 20px;right: 100px;
        font-size: 28px;color: #fff;
        border-radius: 4px;
        padding: 0 10px 0 10px;
        background-color: #00d1d0;
    }
    .agv:hover{
        background-color: #18fcfc;
    }
    ._left_logo {
        border-right: 1px solid #eee;
        width: 230px;font-size: 14px;
        text-align: center;padding-right:20px;
        img {
            width: 100%;height: 100%;
        }
    }
    ._right_box {
        width: calc(100% - 231px);
        padding: 0 20px;
        ._titlens {
            font-size: 46px;font-family: fonta;color: #fff;
            overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
            span {
                color: #00d1d0;
            }
        }
        .input_flex {
            display: flex;align-items: flex-start;width: 160px;
            line-height: 26px;font-size: 14px;
            .search_left {
                width: 72px;color: #fff;
                text-align: center;
            }
        }
    }
}
</style>